<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报名管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <form data-form="search">
        <div class="audit-top">
            <span>问卷名</span>
            <span class="input-select">
                <input type="text" name="questionTitleLike" value="" placeholder="问卷名模糊搜索"/>
            </span>

            <span class="ml-20">订单状态</span>
            <span data-select="orderStates"></span>

            <span class="ml-20">开始时间</span>
            <span class="input-select">
                <input type="text" name="addBeginTime" value="" placeholder="提交开始时间" readonly/>
                <i class="bi-chevron-down"></i>
            </span>

            <span class="ml-20">结束时间</span>
            <span class="input-select">
                <input type="text" name="addEndTime" value="" placeholder="提交结束时间" readonly/>
                <i class="bi-chevron-down"></i>
            </span>

            <a data-btn="search" class="search-btn ml-20" href="javascript:">搜索</a>
            <a data-btn="export" class="search-btn ml-10 btn-line" href="javascript:">导出</a>
        </div>
    </form>
    <div data-list="content" class="table-con  mt-20">

    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<!--图片上传-->
<link href="/ui/pc/js/lightbox/css/lightbox.min.css" rel="stylesheet"/>
<script src="/ui/pc/js/lightbox/js/lightbox.js"></script>
<script src="/admin/public/uploadFile.js"></script>
<script src="/admin/public/getUploadImgWidget.js"></script>

<script src="/ui/pc/js/laydate/laydate.js"></script>

<script src="/admin/quesOrder/js/finishQuesOrderDialog.js"></script>
<script src="/admin/quesOrder/js/cancelQuesOrderDialog.js"></script>
<script src="/admin/quesOrder/js/quesOrderDetailsDialog.js"></script>


<script>
    const $searchForm = $('[data-form="search"]');
    const $listWarp = $('[data-list="content"]');

    $searchForm.find('[data-select="orderStates"]').replaceWith($.getSelect("orderStates", [
        {name: "请选择", value: "2,3,-2"},
        {name: "已支付", value: 2},
        {name: "已取消", value: -2},
        {name: "待支付", value: 1},
    ]));

    laydate.render({
        elem: $searchForm.find('[name="addBeginTime"]')[0],
        type: "date"
    });

    laydate.render({
        elem: $searchForm.find('[name="addEndTime"]')[0],
        type: "date"
    });

    const orderStateDict = {"1": "待支付", "2": "已支付", "3": "已完成", "-1": "支付超时", "-2": "取消"}

    const listHandler = $.commonList({
        $warp: $listWarp,
        column: [
            {title: "订单ID", value: "orderId"},
            {title: "问卷", value: "questionTitle"},
            {title: "金额", value: ({price}) => (price / 100).toFixed(2)},
            {title: "状态", value: ({orderState}) => orderStateDict[orderState + ""]},
            {title: "添加时间", value: "addTime"},
            {
                title: "问卷截选", value: ({answerCut}) => {
                    if (!answerCut) {
                        return;
                    }
                    const $dom = $(`<div></div>`);
                    [...JSON.parse(answerCut)].forEach(({title, value}) => {
                        $dom.append(`<p>${title} : ${value}</p>`)
                    });

                    return $dom;
                }
            },
            {
                title: "操作", value: data => {
                    const {orderState, orderId} = data;
                    const $detailsBtn = $('<a href="javascript:" class="c-btn btn-gray m5">明细</a>');
                    const $finishBtn = $('<a href="javascript:" class="c-btn btn-blue m5">完成</a>');
                    const $cancelBtn = $('<a href="javascript:" class="c-btn btn-red m5">取消</a>');

                    $finishBtn.on("click", () => {
                        finishQuesOrderDialog(orderId, () => {
                            listHandler.getPage();
                        })
                    });

                    $cancelBtn.on("click", () => {
                        cancelQuesOrderDialog(orderId, () => {
                            listHandler.getPage();
                        })
                    })

                    $detailsBtn.on("click", () => {
                        quesOrderDetailsDialog(orderId);
                    });

                    //控制操作按钮
                    const $dom = $('<div></div>');

                    if (orderState === 2) {
                        $dom.append($finishBtn, $cancelBtn);
                    }

                    $dom.append($detailsBtn);

                    return $dom;
                }
            },
        ],
        dataSource: (currPage, callback) => {
            const param = $.getFormData($searchForm);
            param.pageIndex = currPage;
            param.pageSize = 10;

            if (param.addBeginTime) {
                param.addBeginTime += " 00:00:00";
            }

            if (param.addEndTime) {
                param.addEndTime += " 23:59:59";
            }

            queryQuesOrderPage(param, ({Code, Message, Result = [], Total}) => {
                if (Code !== 10000) {
                    return callback(Message, 0);
                }

                return callback(Result, Total, param.pageSize);
            });
        }
    });

    //搜索按钮
    $searchForm.find('[data-btn=search]').on("click", () => {
        listHandler.getPage(1);
    });

    //导出按钮
    $('[data-btn="export"]').on("click", () => {
        const param = $.getFormData($searchForm);
        location.href = $.sUrl("/api/QuestionOrder/exportQuesOrderExcel", param);
    })

    function queryQuesOrderPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/QuestionOrder/queryQuesOrderPage"
        }, callback)
    }


</script>
</body>
</html>